<template>
	<u-form labelWidth="auto">
		<view>
			<view style="display: flex">
				<view>
					<view class="option" style="width: 396rpx">
						<view class="lf">项目名称</view>
						<view class="rl">
							{{ item.projectId ? filterMultiDictText(this.dictOptions['projectId'], item.projectId + '') : '' }}
						</view>
					</view>
					<view class="option" style="width: 396rpx">
						<view class="lf">项目编号</view>
						<view class="rl">
							{{ item.projectCode }}
						</view>
					</view>
					<view class="option" style="width: 396rpx">
						<view class="lf">业绩归属年度</view>
						<view class="rl">
							{{ item.attributionYear }}
						</view>
					</view>
					<view class="option" style="width: 396rpx">
						<view class="lf">任务分类</view>
						<view class="rl">{{ item.taskId ? filterMultiDictText(this.dictOptions['taskId'], item.taskId + '') : '' }}</view>
					</view>
					<template v-if="isRelProject != '1'">
						<view class="option" style="width: 396rpx">
							<view class="lf">任务说明</view>
							<view class="rl">{{ item.taskDescription }}</view>
						</view>
					</template>
					<view class="option" style="width: 396rpx">
						<view class="lf">出发时间</view>
						<view class="rl">{{ item.setOutTime ? moment(item.setOutTime).format('YYYY-MM-DD HH') : '' }}</view>
					</view>
					<view class="option" style="width: 396rpx">
						<view class="lf">回程时间</view>
						<view class="rl">{{ item.backTime  ? moment(item.backTime).format('YYYY-MM-DD HH') : '' }}</view>
					</view>
					<view class="option" style="width: 396rpx">
						<view class="lf">出差天数</view>
						<view class="rl">{{ item.days }}</view>
					</view>

					<template v-if="isTrip">
						<view class="option" style="width: 396rpx">
							<view class="lf">报销内容</view>
							<view class="rl">
								{{ item.feeType ? filterMultiDictText(this.dictOptions['feeType'], item.feeType + '') : '' }}
							</view>
						</view>
						<view class="option" style="width: 396rpx">
							<view class="lf">交通方式</view>
							<view class="rl">
								{{ item.transportMode ? filterMultiDictText(this.dictOptions['transportMode'], item.transportMode + '') : '' }}
							</view>
						</view>
						<view class="option" style="width: 396rpx">
							<view class="lf">发票类型</view>
							<view class="rl">
								{{ filterMultiDictText(this.dictOptions['isSpecial'], item.isSpecial + '') }}</view>
						</view>
						<view class="option" style="width: 396rpx">
							<view class="lf">报销金额（元）</view>
							<view class="rl">{{ item.amount }}</view>
						</view>
						<view class="option" style="width: 396rpx">
							<view class="lf">税费金额（元）</view>
							<view class="rl">{{ item.taxation }}</view>
						</view>
						<view class="option" style="width: 396rpx">
							<view class="lf">未税金额（元）</view>
							<view class="rl">{{ item.untaxedAmount }}</view>
						</view>
						<view class="option" style="width: 396rpx">
							<view class="lf">税率（%）</view>
							<view class="rl">{{ item.taxRate }}</view>
						</view>
					</template>

					<view class="option" style="width: 396rpx">
						<view class="lf">出发地点</view>
						<view class="rl">{{ getAddress(item.departurePlace) }}</view>
					</view>
					<view class="option" style="width: 396rpx">
						<view class="lf">到达地点</view>
						<view class="rl">{{ getAddress(item.targetPlace) }}</view>
					</view>

					<template v-if="isDrive">
						<view class="option" style="width: 396rpx">
							<view class="lf">报销内容</view>
							<view class="rl">
								{{ item.selfDriving ? filterMultiDictText(this.dictOptions['selfDriving'], item.selfDriving + '') : '' }}
								</view>
						</view>
						<view class="option" style="width: 396rpx">
							<view class="lf">交通方式</view>
							<view class="rl">
								{{ item.selfDrivingMode ? filterMultiDictText(this.dictOptions['selfDrivingMode'], item.selfDrivingMode + '') : '' }}
							</view>
						</view>
						<view class="option" style="width: 396rpx">
							<view class="lf">出发里程数（km）</view>
							<view class="rl">{{ item.startMileage }}</view>
						</view>
						<view class="option" style="width: 396rpx">
							<view class="lf">返程里程数（km）</view>
							<view class="rl">{{ item.endMileage }}</view>
						</view>
						<view class="option" style="width: 396rpx">
							<view class="lf">里程数（km）</view>
							<view class="rl">{{ item.mileage }}</view>
						</view>
						<view class="option" style="width: 396rpx">
							<view class="lf">补贴单价（元）</view>
							<view class="rl">
								{{ item.subsidyUnitPrice ? filterMultiDictText(this.dictOptions['subsidyUnitPrice'], item.subsidyUnitPrice + '') : '' }}
							</view>
						</view>
						<view class="option" style="width: 396rpx">
							<view class="lf">报销金额（元）</view>
							<view class="rl">{{ item.amount }}</view>
						</view>
						<view class="option" style="width: 396rpx">
							<view class="lf">补助领款人</view>
							<view class="rl">
								{{ item.subsidyProposer ? filterMultiDictText(this.dictOptions['subsidyProposer'], item.subsidyProposer + '') : '' }}
							</view>
						</view>
					</template>
					<!-- <view class="option" style="width: 396rpx">
						<view class="lf">备注</view>
						<view class="rl">{{ item.remark }}</view>
					</view> -->
				</view>

				<view style="flex: 1; display: flex; align-items: center; justify-content: flex-end" v-if="!isBtn">
					<u-icon name="edit-pen-fill" color="#2979ff" size="20"
						@click.native.stop="handleEidtForm(item, index)"></u-icon>
					<u-line direction="col" length="20" margin="0 10rpx" v-if="!disabled"></u-line>
					<view class="icon custom-icon custom-icon-fuzhiwenjian" style="color:#2979ff;font-size: 20px"
						@click.stop="handleCopyForm(item, index)" v-if="!disabled"></view>
					<u-line direction="col" length="20" margin="0 10rpx" v-if="!disabled"></u-line>
					<u-icon name="trash-fill" color="red" size="20" @click.native.stop="handleRemoveForm(item)" v-if="!disabled"></u-icon>
				</view>
			</view>
		</view>
	</u-form>
</template>

<script>
	import {
		initDictOptions,
		filterMultiDictText
	} from '@/utils/JDictSelectUtil.js'
	import address from '@/utils/address.js'
	import moment from 'moment'
	export default {
		name: 'BillFormInfo',
		props: {
			formType: {
				type: String,
				default: 'trip',
			},
			index: {
				type: Number,
				default: null,
			},
			item: {
				type: Object,
				default: () => ({}),
			},
			isRelProject: {
				type: Boolean,
				default: false,
			},
			disabled: {
				type: Boolean,
				default: false,
			},
			isBtn: {
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				address,
				filterMultiDictText,
				moment
			}
		},
		inject: ['dictOptions'],
		computed: {
			isTrip() {
				return this.formType === 'trip'
			},
			isDrive() {
				return this.formType === 'drive'
			},
		},
		methods: {
			// 地址显示
			getAddress(areaCode) {
				var arr = areaCode.split(',')
				if (arr.length === 1) {
					arr.length = 0
					const code1 = areaCode.slice(0, 2)
					const code2 = areaCode.slice(2, 4)
					const code3 = areaCode.slice(4, 6)
					arr.push(code1)
					arr.push(code1 + code2)
					arr.push(code1 + code2 + code3)
				}
				var addressDetail = ''
				this.address.map((value) => {
					if (arr[0] && value.code == arr[0]) {
						addressDetail = value.name
						value.children.map((val) => {
							if (arr[1] && val.code == arr[1]) {
								addressDetail = addressDetail + val.name
								val.children.map((item) => {
									if (arr[2] && item.code == arr[2]) {
										addressDetail = addressDetail + item.name
									}
								})
							}
						})
					}
				})
				return addressDetail
			},
			handleEidtForm(item) {
				this.$emit('edit', [item, this.index])
			},
			handleCopyForm(item) {
				uni.showModal({
					content: '确定复制行吗？',
					success: (res) => {
						if (res.confirm) {
							this.$emit('copy', [item, this.index]);
						}
					},
				})
			},
			handleRemoveForm(item) {
				uni.showModal({
					content: '确定删除吗？',
					success: (res) => {
						if (res.confirm) {
							this.$emit('remove', item)
						}
					},
				})
			},
			// handleCopyTripForm(item) {
			//   this.$emit('copy', [item, this.index])
			// },
			// handleEidtTripForm(item) {
			//   this.$emit('edit', [item, this.index])
			// },
			// handleRemoveTripForm(item) {
			//   this.$emit('remove', item)
			// },
		},
	}
</script>

<style scoped></style>